
<template>
  <!-- 添加或修改配置对话框 -->
  <el-card class="card-body">
    <el-row :gutter="20" class="row-style">
      <el-col :span="24" class="left-layout">
        <el-form ref="managerRef" :model="form" :rules="rules" label-width="150px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="订单编号" prop="majorSu" v-if="true">
                <span>{{form.id}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="下单时间" prop="craftIntro" v-if="true">
                <span>{{form.buyTime||'-'}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="订单金额" prop="craftDanger" v-if="true">
                <span>{{form.indentSum||'-'}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系人" prop="craftClassic" v-if="true">
                <span>{{form.contacts||'-'}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系方式" prop="craftMajorParameter" v-if="true">
                <span>{{form.phone||'-'}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="订单状态" prop="securityControlRequire" v-if="true">
                <span>{{form.phone||'-'}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="支付状态" prop="controlMode" v-if="true">
                <span>{{form.phone||'-'}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="cancel">返 回</el-button>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
//API接口
import api from "@/api";
//引入消息弹出框
import { ElMessage, ElMessageBox } from "element-plus";
//上传组件
import Upload from "@/components/FileUpload/index.vue";
//富文本组件
import Editor from "@/components/Editor/index.vue";

export default {
  components: { Upload, Editor },
  props: {
    save: {
      type: Function,
      default: (e, obj) => {
        obj.$router.go(-1);
      }
    },
    formList: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      options: [
        { value: "1", label: "化工行业" },
        { value: "2", label: "工业行业" }
      ],
      options2: [{ value: "1", label: "光气化反应釜、光气储运单元" }],
      options3: [{ value: "1", label: "放热反应" }],
      isType: "",
      //表单验证
      form: {},
      isShow: true,
      rules: {
        origin: [
          { required: true, message: "行业来源不能为空", trigger: "blur" }
        ],
        craftName: [
          { required: true, message: "工艺名称不能为空", trigger: "blur" }
        ]
      }
    };
  },
  /**
   * 挂载函数
   */
  mounted() {
    //根据状态判断是否请求详情接口
    this.isType = this.formList.type
      ? this.formList.type
      : this.$route.query.isType;
    if (this.isType === "edit" || this.isType === "details") {
      //编辑以及详情通过路由跳转传参
      let editid = this.formList.id ? this.formList.id : this.$route.query.id;
      //如果事项请页面隐藏提交按钮
      if (this.$route.query.type) {
        this.isShow = false;
      }
      // 跳转链接时请求详情接口表单回显数据
      api.order.query({id:editid}).then(res => {
        if (res.data) {
          this.form = res.data;
        }
      });
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["managerRef"].validate(valid => {
        Object.keys(this.formList).map(key => {
          if (this.isType) {
            if (key != "id") {
              this.form[key] = this.formList[key];
            }
          } else {
            this.form[key] = this.formList[key];
          }
        });
        if (valid) {
          if (this.isType && this.form.id) {
            api.zfFocuseCraft
              .edit(this.form)
              .then(res => {
                this.save(res, this);
                this.$message.success(res.msg);
              })
              .catch(err => {
                this.$message.error(err.msg);
              });
          } else {
            api.zfFocuseCraft
              .add(this.form)
              .then(res => {
                this.save(res, this);
                this.$message.success(res.msg);
              })
              .catch(err => {
                this.$message.error(err.msg);
              });
          }
        }
      });
    },
    /** 更新流程实例、流程状态 */
    /** 取消按钮 */
    cancel() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
:deep(.el-tabs__nav-scroll) {
  padding: 0 20px;
}
:deep(.el-tabs__content) {
  height: 560px;
  overflow-y: scroll;
}
</style>